<template>
  <div class="login-div">
    <div class="title">
      <span class="title-icon">
        <svg-icon style="width: 40px;height: 40px;" name="icon_title" />
      </span>
      <span>用户登录</span>
    </div>
    <el-form
      ref="loginForm"
      :model="loginForm"
      :rules="loginRules"
      class="login-form"
      autocomplete="on"
      label-position="right"
    >
      <el-form-item prop="username" style="margin-bottom: 24px;">
        <el-input
          ref="username"
          v-model="loginForm.username"
          :placeholder="inputPlaceholder"
          name="username"
          type="text"
          autocomplete="on"
        >
          <span slot="prefix" class="svg-container">
            <svg-icon name="icon_user" />
          </span>
          <el-select
            class="login-type"
            v-model="loginType"
            slot="prepend"
            placeholder="请选择"
          >
            <el-option
              v-for="o in loginMethods"
              :key="o.title"
              :label="o.title"
              :value="o.type"
            ></el-option>
          </el-select>
        </el-input>
      </el-form-item>

      <el-form-item prop="password" style="margin-bottom: 24px;">
        <el-input
          :key="passwordType"
          ref="password"
          v-model="loginForm.password"
          :type="passwordType"
          placeholder="请输入密码"
          name="password"
          autocomplete="on"
          @keyup.enter.native="handleLogin"
        >
          <span slot="prefix" class="svg-container">
            <svg-icon name="icon_lock" />
          </span>
        </el-input>
        <span class="show-pwd" @click="showPwd">
          <svg-icon
            :name="passwordType === 'password' ? 'eyes2' : 'icon_eyes1'"
          />
        </span>
      </el-form-item>
      <div class="forget">
        <router-link to="/login/find-pwd">
          忘记密码
        </router-link>
      </div>
      <el-button
        v-waves
        :loading="loading"
        type="primary"
        style="width:100%; margin-bottom:34px;"
        @click.native.prevent="handleLogin"
      >
        登录
      </el-button>

      <div class="to-reg">
        <router-link to="login/register">
          新用户
          <svg-icon name="arrow2" />
        </router-link>
      </div>
    </el-form>
  </div>
</template>
<script lang="ts">
/**
 * generate by vscode
 */
import { Component, Vue, Prop } from 'vue-property-decorator'
import { isValidMobile, isValidEmail } from '@/utils/validate'
import { UserModule } from '@/store/modules/user'
import { Form } from 'element-ui'
@Component({
  name: 'login'
})
export default class login extends Vue {
  @Prop() someProp?: any
  private passwordType = 'password'
  private loading = false
  private loginType = ''

  mounted() {
    this.loginType = this.loginMethods[0].type
  }

  private validateMobileOrEmail = (
    rule: any,
    value: string,
    callback: Function
  ) => {
    if (!value.length && !isValidEmail(value)) {
      callback(new Error('请输入用户名或邮箱'))
    } else {
      callback()
    }
  }
  private validatePassword = (rule: any, value: string, callback: Function) => {
    if (value.length < 6) {
      callback(new Error('密码不能低于6位'))
    } else {
      callback()
    }
  }
  private loginRules = {
    username: [{ required: true, message: '请输入', trigger: 'blur' }],
    mobile: [{ validator: this.validateMobileOrEmail, trigger: 'blur' }],
    password: [{ validator: this.validatePassword, trigger: 'blur' }]
  }
  private loginForm = {
    username: '',
    password: ''
    // mobile: '18144395203',
    // password: '123456'
  }

  private showPwd() {
    if (this.passwordType === 'password') {
      this.passwordType = ''
    } else {
      this.passwordType = 'password'
    }
    this.$nextTick(() => {
      //@ts-ignore
      this.$refs.password.focus()
    })
  }

  get loginMethods() {
    const md: any = UserModule.sysConfig
      ? UserModule.sysConfig.loginMethods
      : {}
    return [
      { title: '用户名', type: 'username' },
      { title: '邮箱', type: 'email' },
      { title: '手机号', type: 'mobile' }
    ].filter(o => md[o.type])
  }

  get inputPlaceholder() {
    const find = this.loginMethods.find(o => o.type === this.loginType)
    return '请输入' + (find ? find.title : '')
  }

  private handleLogin() {
    const query = { ...this.$route.query }
    delete query.redirect
    try {
      const form = this.$refs.loginForm as Form
      form.validate(async (valid: boolean) => {
        if (valid) {
          this.loading = true
          await UserModule.Login({
            method: this.loginType,
            ...this.loginForm
          })
          this.$router.push({
            path: '/auth-redirect',
            query
          })
        } else {
          return false
        }
      })
    } catch (error) {
      console.log('这里报错了')
      console.log(error)
    } finally {
      setTimeout(() => {
        this.loading = false
      }, 1000)
    }
  }
}
</script>
<style lang="scss">
.to-reg {
  color: #1890ff;
  text-align: center;
}
.forget {
  text-align: right;
  margin-bottom: 16px;
  color: #1890ff;
}

.login-form {
  position: relative;
  width: 368px;
}
.login-type {
  width: 100px;
  input {
    padding: 0 20px !important;
  }
}
</style>
